<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content level">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>一级分类</span>
              <el-button style="float: right;" size="mini" type="danger" plain @click="del(1)">删除</el-button>
              <el-button style="float: right;margin-right: 10px;" size="mini" type="warning" plain @click="edit(1)">编辑</el-button>
              <el-button style="float: right;" size="mini" type="primary" plain @click="add(1)">新增</el-button>
            </div>
            <ul>
              <li v-for="(item,item_index) in level1_data" :key="item.id+'-'+item_index" class="level-item" :class="{'check-color':item.id == currentLevel1.id}" @click="checkItem(item,1)">
                <span v-show="item.id == currentLevel1.id" style="color:green;">
                  <icon name="check" />
                </span>
                <span>{{ item.name }}</span>
              </li>
            </ul>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content level">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>二级分类</span>
              <el-button style="float: right;" size="mini" type="danger" plain @click="del(2)">删除</el-button>
              <el-button style="float: right;margin-right: 10px;" size="mini" type="warning" plain @click="edit(2)">编辑</el-button>
              <el-button style="float: right;" size="mini" type="primary" plain @click="add(2)">新增</el-button>
            </div>
            <ul v-if="level2_data.length > 0">
              <li v-for="(item,item_index) in level2_data" :key="item.id+'--'+item_index" class="level-item" :class="{'check-color':item.id == currentLevel2.id}" @click="checkItem(item,2)">
                <span v-show="item.id == currentLevel2.id" style="color:green;">
                  <icon name="check" />
                </span>
                <span>{{ item.name }}</span>
              </li>
            </ul>
            <ul v-else>
              <li>
                <p style="text-align: center;color:#cfcfcf">----暂无数据----</p>
              </li>
            </ul>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-if="dialog_visible" v-loading="loading" :title="formTitle" :visible.sync="dialog_visible" width="730px" top="50px">
      <el-form ref="form" :model="form" label-position="right" :rules="formRules">
        <el-form-item v-show="false" label="当前分类的父级ID:" :label-width="formLabelWidth">
          <el-input v-model.trim="form.parentId" autocomplete="off" />
        </el-form-item>

        <el-form-item v-show="/[二三]+/.test(formTitle)" label="所属一级分类名称:" :label-width="formLabelWidth">
          <el-input v-model.trim="currentLevel1.name" autocomplete="off" disabled />
        </el-form-item>

        <el-form-item v-show="false" label="ID:" :label-width="formLabelWidth">
          <el-input v-model.trim="form.id" autocomplete="off" />
        </el-form-item>

        <el-form-item label="分类名称:" :label-width="formLabelWidth" prop="name">
          <el-input v-model.trim="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="同级排序：" :label-width="formLabelWidth" prop="seq">
          <el-input v-model.number="form.seq" type="number" />
        </el-form-item>

        <el-form-item v-show="form.id" label="是否启用:" :label-width="formLabelWidth">
          <el-switch v-model="form.status" />
        </el-form-item>
        <el-form-item label="类目图标：" :label-width="formLabelWidth">
          <cst-upload-singleimage hint="只能上传一张，且不超过1M" type="icon" @change-imagefile="changeImagefile" @delete-imagefile="deleteImagefile" />
        </el-form-item>
        <el-form-item label="分类图片：" :label-width="formLabelWidth">
          <cst-upload-singleimage hint="只能上传一张，且不超过1M" type="pic" @change-imagefile="changeImagefile" @delete-imagefile="deleteImagefile" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
  ul,ul li{
    list-style: none;
  }
  .level-item{
    line-height: 30px;
  }
  .check-color{
    color:red;
    font-weight:700;
  }
</style>

<script>
import { getList, saveCagegory, deleteCategory } from '@/api/mall/category'
import { MessageBox } from 'element-ui'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
import cstUploadSingleimage from '@/components/UploadSingleimage/up_singleimage.vue'
const name_lengthLimit_6 = (rule, value, callback) => {
  if (value === '') {
    return callback(new Error('分类名不能为空'))
  } else if (value.toString().length > 6) {
    return callback(new Error('分类名不能超过6个字符'))
  } else {
    callback()
  }
}
export default {
  components: {
    ElCol,
    ElRow,
    cstUploadSingleimage
  },
  data() {
    return {
      level1_data: [],
      level2_data: [],
      currentLevel1: {},
      currentLevel2: {},
      formTitle: '',
      dialog_visible: false,
      loading: false,
      formLabelWidth: '150px',
      form: { },
      formRules: {// 提交表单验证规则
        name: [
          { validator: name_lengthLimit_6 }
        ]
      }
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    getCategoryList: function(parentID) {
      const _this = this
      const param = {}
      if (parentID) {
        param.parentID = parentID
      }
      getList(param).then(res => {
        if (parentID) {
          _this.level2_data = res
        } else {
          _this.level1_data = res
          if (res.length > 0) {
            _this.currentLevel1 = res[0]
            _this.getCategoryList(res[0].id)
          }
        }
      })
    },
    checkItem: function(item, type) {
      if (type === 1) {
        this.currentLevel1 = item
      } else if (type === 2) {
        this.currentLevel2 = item
      }
    },
    add: function(type) {
      const form = {}
      if (type === 2) { // 新增二级分类
        form.parentId = this.currentLevel1.id
      }
      this.form = form
      this.dialog_visible = true
    },
    edit: function(type) {
      if (type === 1) {
        this.form = { ...this.currentLevel1 }
      } else if (type === 2) {
        this.form = { ...this.currentLevel2 }
      }
      this.dialog_visible = true
    },
    del: function(type) {
      let categoryID
      if (type === 1) {
        categoryID = this.currentLevel1
      } else if (type === 2) {
        categoryID = this.currentLevel2
      }
      if (categoryID) {
        MessageBox.confirm(
          '请确保该分类没有被商品使用，否则无法删除',
          '系统提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          console.log('执行删除逻辑')
        })
      } else {
        Notification.error({
          title: '请选择要删除的分类',
          duration: 5000
        })
      }
    },
    resetForm: function() {
      this.form = {}
      this.dialog_visible = false
    },
    submitForm: function() {
      const _this = this
      this.loading = true
      const loading = this.$loading({
        lock: true,
        text: '请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      saveCagegory(this.form).then(res => {
        loading.close()
        _this.loading = false
        _this.dialog_visible = false
        _this.getCategoryList()
      }).catch(()=>{
        loading.close()
      })
    },
    changeImagefile(obj) {
      console.log(obj)
      this.form[obj.type] = obj.image
      this.form.imageFile = obj.imageFile // imageFile传给后台
      console.log(this.form)
      return false
    },
    deleteImagefile(imagefile) {
      this.form.image = '' //
      this.form.imageFile = '' // imageFile传给后台
      return false
    }
  }
}
</script>
